
<style>
    {% block extra_css %}
        {{ custom_theme.extra_css }}
    {% endblock %}
</style>
{% block content %}
    {% comment %}
    <!-- example of custom theme -->
    <style>
        /* structure of the selector for a custom theme .gn-theme-{variant} */
        .msgapi .gn-theme-custom {
            /* this variables should be generated from lesscss files */
            --gn-font-family-sans-serif: 'Montserrat', sans-serif;
            --gn-font-family-serif: Georgia, 'Times New Roman', Times, serif;
            --gn-font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
            --gn-font-family-base: 'Montserrat', sans-serif;
            --gn-main-color: #000000;
            --gn-main-bg: #ffffff;
            --gn-main-border-color: #dddddd;
            --gn-main-variant-color: #000000;
            --gn-main-variant-bg: #f2f0f0;
            --gn-main-hover-color: #000000;
            --gn-main-hover-bg: #eeeeee;
            --gn-placeholder-color: #aaaaaa;
            --gn-placeholder-bg: #dddddd;
            --gn-disabled-color: #aaaaaa;
            --gn-disabled-bg: #dddddd;
            --gn-primary: #397AAB;
            --gn-info: #639fcc;
            --gn-success: #58cf80;
            --gn-warning: #ebbc35;
            --gn-danger: #bb4940;
            --gn-primary-contrast: #ffffff;
            --gn-info-contrast: #ffffff;
            --gn-success-contrast: #ffffff;
            --gn-warning-contrast: #ffffff;
            --gn-danger-contrast: #ffffff;
            --gn-link-color: #397AAB;
            --gn-link-hover-color: #1b4d74;
            --gn-image-color: #333333;
            --gn-image-bg: #f2f2f2;
            --gn-focus-color: rgba(57, 122, 171, 0.4);
            --gn-footer-color: #000000;
            --gn-footer-bg: #ffffff;
            --gn-footer-link-color: #397AAB;
            --gn-footer-link-hover-color: #1b4d74;
            --gn-badge-color: #ffffff;
            --gn-badge-bg: #777777;
            --gn-loader-color: #000000;
            --gn-loader-fade-color: rgba(0, 0, 0, 0.2);
            --gn-loader-primary-contrast-color: #ffffff;
            --gn-loader-primary-contrast-fade-color: rgba(255, 255, 255, 0.2);
            --gn-loader-primary-color: #397AAB;
            --gn-loader-primary-fade-color: rgba(57, 122, 171, 0.2);
            --gn-jumbotron-color: #ffffff;
            --gn-jumbotron-bg: #0c3756;
            --gn-timeline-selected-bg: rgba(57, 122, 171, 0.05);
            --gn-timeline-histogram-bg: rgba(57, 122, 171, 0.5);
            --gn-timeline-histogram-color: #2c5f85;
            --gn-timeline-range-bg: rgba(0, 0, 0, 0.2);
            --gn-timeline-playback-range-bg: rgba(128, 218, 158, 0.2);
            --gn-button-color: #000000;
            --gn-button-bg: #ffffff;
            --gn-button-border-color: #ffffff;
            --gn-button-focus-color: #000000;
            --gn-button-focus-bg: #e6e6e6;
            --gn-button-focus-border-color: #e6e6e6;
            --gn-button-hover-color: #1a1a1a;
            --gn-button-hover-bg: #e6e6e6;
            --gn-button-hover-border-color: #e6e6e6;
            --gn-button-active-color: #1a1a1a;
            --gn-button-active-bg: #e6e6e6;
            --gn-button-active-border-color: #e6e6e6;
            --gn-button-active-hover-color: #1a1a1a;
            --gn-button-active-hover-bg: #d4d4d4;
            --gn-button-active-hover-border-color: #d4d4d4;
            --gn-button-disabled-color: #acacac;
            --gn-button-disabled-bg: #fcfcfc;
            --gn-button-disabled-border-color: #fcfcfc;
            --gn-button-badge-color: #000000;
            --gn-button-badge-bg: #ffffff;
            --gn-button-primary-color: #ffffff;
            --gn-button-primary-bg: #397AAB;
            --gn-button-primary-border-color: #397AAB;
            --gn-button-primary-focus-color: #ffffff;
            --gn-button-primary-focus-bg: #2c5f85;
            --gn-button-primary-focus-border-color: #19364b;
            --gn-button-primary-hover-color: #ffffff;
            --gn-button-primary-hover-bg: #2c5f85;
            --gn-button-primary-hover-border-color: #2a597d;
            --gn-button-primary-active-color: #ffffff;
            --gn-button-primary-active-bg: #2c5f85;
            --gn-button-primary-active-border-color: #2a597d;
            --gn-button-primary-active-hover-color: #ffffff;
            --gn-button-primary-active-hover-bg: #234c6a;
            --gn-button-primary-active-hover-border-color: #19364b;
            --gn-button-primary-disabled-color: #ffffff;
            --gn-button-primary-disabled-bg: #93a8b7;
            --gn-button-primary-disabled-border-color: #93a8b7;
            --gn-button-primary-badge-color: #397AAB;
            --gn-button-primary-badge-bg: #ffffff;
            --gn-button-info-color: #ffffff;
            --gn-button-info-bg: #639fcc;
            --gn-button-info-border-color: #639fcc;
            --gn-button-info-focus-color: #ffffff;
            --gn-button-info-focus-bg: #3e87be;
            --gn-button-info-focus-border-color: #2b5e84;
            --gn-button-info-hover-color: #ffffff;
            --gn-button-info-hover-bg: #3e87be;
            --gn-button-info-hover-border-color: #3c82b6;
            --gn-button-info-active-color: #ffffff;
            --gn-button-info-active-bg: #3e87be;
            --gn-button-info-active-border-color: #3c82b6;
            --gn-button-info-active-hover-color: #ffffff;
            --gn-button-info-active-hover-bg: #3574a3;
            --gn-button-info-active-hover-border-color: #2b5e84;
            --gn-button-info-disabled-color: #ffffff;
            --gn-button-info-disabled-bg: #c0ccd5;
            --gn-button-info-disabled-border-color: #c0ccd5;
            --gn-button-info-badge-color: #639fcc;
            --gn-button-info-badge-bg: #ffffff;
            --gn-button-success-color: #ffffff;
            --gn-button-success-bg: #58cf80;
            --gn-button-success-border-color: #58cf80;
            --gn-button-success-focus-color: #ffffff;
            --gn-button-success-focus-bg: #36be64;
            --gn-button-success-focus-border-color: #258245;
            --gn-button-success-hover-color: #ffffff;
            --gn-button-success-hover-bg: #36be64;
            --gn-button-success-hover-border-color: #34b660;
            --gn-button-success-active-color: #ffffff;
            --gn-button-success-active-bg: #36be64;
            --gn-button-success-active-border-color: #34b660;
            --gn-button-success-active-hover-color: #ffffff;
            --gn-button-success-active-hover-bg: #2fa255;
            --gn-button-success-active-hover-border-color: #258245;
            --gn-button-success-disabled-color: #ffffff;
            --gn-button-success-disabled-bg: #b8d5c2;
            --gn-button-success-disabled-border-color: #b8d5c2;
            --gn-button-success-badge-color: #58cf80;
            --gn-button-success-badge-bg: #ffffff;
            --gn-button-warning-color: #ffffff;
            --gn-button-warning-bg: #ebbc35;
            --gn-button-warning-border-color: #ebbc35;
            --gn-button-warning-focus-color: #ffffff;
            --gn-button-warning-focus-bg: #d8a515;
            --gn-button-warning-focus-border-color: #92700e;
            --gn-button-warning-hover-color: #ffffff;
            --gn-button-warning-hover-bg: #d8a515;
            --gn-button-warning-hover-border-color: #ce9e14;
            --gn-button-warning-active-color: #ffffff;
            --gn-button-warning-active-bg: #d8a515;
            --gn-button-warning-active-border-color: #ce9e14;
            --gn-button-warning-active-hover-color: #ffffff;
            --gn-button-warning-active-hover-bg: #b78d12;
            --gn-button-warning-active-hover-border-color: #92700e;
            --gn-button-warning-disabled-color: #ffffff;
            --gn-button-warning-disabled-bg: #e2d2a4;
            --gn-button-warning-disabled-border-color: #e2d2a4;
            --gn-button-warning-badge-color: #ebbc35;
            --gn-button-warning-badge-bg: #ffffff;
            --gn-button-danger-color: #ffffff;
            --gn-button-danger-bg: #bb4940;
            --gn-button-danger-border-color: #bb4940;
            --gn-button-danger-focus-color: #ffffff;
            --gn-button-danger-focus-bg: #953a33;
            --gn-button-danger-focus-border-color: #5c241f;
            --gn-button-danger-hover-color: #ffffff;
            --gn-button-danger-hover-bg: #953a33;
            --gn-button-danger-hover-border-color: #8d3730;
            --gn-button-danger-active-color: #ffffff;
            --gn-button-danger-active-bg: #953a33;
            --gn-button-danger-active-border-color: #8d3730;
            --gn-button-danger-active-hover-color: #ffffff;
            --gn-button-danger-active-hover-bg: #7a302a;
            --gn-button-danger-active-hover-border-color: #5c241f;
            --gn-button-danger-disabled-color: #ffffff;
            --gn-button-danger-disabled-bg: #bfa4a2;
            --gn-button-danger-disabled-border-color: #bfa4a2;
            --gn-button-danger-badge-color: #bb4940;
            --gn-button-danger-badge-bg: #ffffff;
            --gn-button-tray-color: #1a1a1a;
            --gn-button-tray-bg: #ffffff;
            --gn-button-tray-border-color: #3c7fb3;
            --gn-button-tray-focus-color: #1a1a1a;
            --gn-button-tray-focus-bg: #e6e6e6;
            --gn-button-tray-focus-border-color: #265172;
            --gn-button-tray-hover-color: #1a1a1a;
            --gn-button-tray-hover-bg: #e6e6e6;
            --gn-button-tray-hover-border-color: #3675a3;
            --gn-button-tray-active-color: #1a1a1a;
            --gn-button-tray-active-bg: #e6e6e6;
            --gn-button-tray-active-border-color: #3675a3;
            --gn-button-tray-active-hover-color: #1a1a1a;
            --gn-button-tray-active-hover-bg: #d4d4d4;
            --gn-button-tray-active-hover-border-color: #265172;
            --gn-button-tray-disabled-color: #1a1a1a;
            --gn-button-tray-disabled-bg: #ffffff;
            --gn-button-tray-disabled-border-color: #ffffff;
            --gn-button-tray-badge-color: #ffffff;
            --gn-button-tray-badge-bg: #1a1a1a;
        }

        /* or use gn-theme to override only some css variables */
        .msgapi .gn-theme {
            --gn-main-color: #000000;
            --gn-main-bg: #ffffff;
            --gn-main-border-color: #dddddd;
        }
    </style>
    {% endcomment %}
{% endblock %}
